<template>
  <div>
    <Button type="primary"  @click="modalForm= true" style="margin-right: 15px;">添加数据</Button>
    <Button type="primary" @click="removes" style="margin-right: 15px;">删除多个</Button>
    <Input suffix="ios-search" placeholder="Enter text" style="width: auto" v-model="searchBox"/>
    <Button type="primary" @click="onSearch">查询</Button>
    <div style="margin-bottom: 15px;"></div>
    
    <div style="display: inline-block; width:230px;height: 372px; border: 1px rgb(204, 204, 204) solid; float: left;margin-right: 5px; padding: 15px;">
    		<Tree :data="data1" @on-select-change='treeclick'></Tree>
    </div>
    <Table border :columns="columns" :data="data" @on-select="onSelect" style="width: 750px;display: inline-block; margin-bottom: 15px;"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />
    	    <Modal
		        v-model = "modalForm"
		        title   = "数据操作"
		        >
		        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="用户名" prop="username">
		            <Input v-model="formValidate.username" placeholder="请输入用户名"></Input>
		        </FormItem>
		        <FormItem label="邮箱" prop="email">
		            <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
		        </FormItem>
		         <FormItem label="类别" prop="product_class">
		            <Input v-model="formValidate.product_class" placeholder="请输入类别"></Input>
		        </FormItem>
		         <FormItem label="货号" prop="productID">
		            <Input v-model="formValidate.productID" placeholder="请输入货号"></Input>
		        </FormItem>
		         <FormItem label="产品名" prop="productName">
		            <Input v-model="formValidate.productName" placeholder="请输入产品名"></Input>
		        </FormItem>
		         <FormItem label="产品描述" prop="description">
		            <Input v-model="formValidate.description" placeholder="请输入产品描述"></Input>
		        </FormItem>
		        <FormItem label="价格" prop="saledNumber">
		            <Input v-model="formValidate.saledNumber" placeholder="请输入价格"></Input>
		        </FormItem>
		        <FormItem>
		            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
		            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
		        </FormItem>
		    </Form>
		    <div slot="footer">
		      添加数据
		    </div>
		    </Modal>

  </div>
</template>
<script>
export default {
  data() {
    return {
    	myUrl:this.GLO.myUrl,
    	searchBox:'',
    	data1:[],
      columns: [
        {
          type : "selection",
          width: 60,
          align: "center",
          fixed:'left'
        },
        {
          title: "订单号",
          key  : "productID",
          fixed:'left',
          width:80
        },
        {
          title: "购买商品",
          key  : "productName",
          width:100
        },
        {
          title: "下单用户",
          key  : "username",
          width:100
        },
        {
          title: "邮箱",
          key  : "email",
          width:150
        },
        {
          title: "类别",
          key  : "product_class",
          width:100
        },
        
        {
          title: "用户备注",
          key  : "description",
          width:300
        },
        {
          title: "价格",
          key  : "saledNumber",
          width:100
        },
        {
          title : "操作",
          key   : "action",
          width : 150,
          align : "center",
          fixed : 'right',
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      formValidate: {
        username : "",
        email: "",
        price: ""
      },
      ruleValidate: {
        username: [
          {
            required: true,
            message : "用户名不能为空",
            trigger : "blur"
          }
        ],
        email: [
          {
            required: true,
            message : "邮箱不能为空",
            trigger : "blur"
          },
          { type: "email", message: "邮箱", trigger: "blur" }
        ],
        product_class: [
          {
            required: true,
            message : "类别不能为空",
            trigger : "blur"
          }
        ],
        productID: [
          {
            required: true,
            message : "货号不能为空",
            trigger : "blur"
          }
        ],
        productName: [
          {
            required: true,
            message : "产品名不能为空",
            trigger : "blur"
          }
        ],
        description: [
          {
            required: true,
            message : "产品描述不能为空",
            trigger : "blur"
          }
        ],
        price: [
          {
            required: true,
            message : "价格不能为空",
            trigger : "blur"
          }
        ]
      },
      data     : [],
      total    : 0,
      page     : 1,
      rows     : 5,
      modalForm: false,
      ids      : []
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate._id) {
            this.axios({
              url: `${this.myUrl}order/data/${
                this.formValidate._id
              }`,
              method: "put",
              data  : this.formValidate
            }).then(res => {
              this.modalForm = false;
              this.getData();
            });
            this.$Message.success("修改成功");
          } else {
            this.axios({
              url   : `${this.myUrl}order/data`,
              method: "post",
              data  : this.formValidate
            }).then(res => {
              this.modalForm = false;
              this.getData();
            });
            this.$Message.success("添加成功");
          }
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    edit(id) {
      this.axios({
        url   : `${this.myUrl}order/data/${id}`,
        method: "put"
      }).then(res => {
        this.formValidate = res.data;
        this.modalForm    = true;
      });
    },
    remove(id) {
      console.log(id);
      this.$Modal.confirm({
        title  : "确认操作",
        content: "<p>你确定要删除么？</p>",
        onOk   : () => {
          this.axios({
            url   : `${this.myUrl}order/data/${id}`,
            method: "delete"
          }).then(res => {
            this.getData();
          });
        },
        onCancel: () => {
          this.$Message.info("取消操作");
        }
      });
    },
    getData() {
      this.axios({
        url   : this.myUrl+"order/list",
        method: "post",
        data:{
        	row:this.row,
        	page:this.page
        }
      }).then(res => {
      	this.total   = res.data.total;
        this.data = res.data.rows;
      });
    },
    onChangePage(page) {
      this.axios({
        url   : this.myUrl+"order/list",
        method: "post",
        data  : {
          page: page
        }
      }).then(res => {
        this.data  = res.data.rows;
        this.total = res.data.total;
      });
    },
    onPageSizeChange(rows) {
      this.axios({
        url   : this.myUrl+"order/list",
        method: "post",
        data  : {
          rows: rows
        }
      }).then(res => {
        this.total = res.data.total;
        this.data  = res.data.rows;
      });
    },
    onSelect(selectionds) {
      var ids = [];
      for (let i = 0; i < selectionds.length; i++) {
        ids.push(selectionds[i]._id);
      }
      this.ids = ids.toString();
    },
    removes() {
      this.$Modal.confirm({
        title  : "确认操作",
        content: "<p>你确定要删除么？</p>",
        onOk   : () => {
          this.axios({
            url   : `${this.myUrl}order/data/removes`,
            method: "post",
            data  : {
              ids: this.ids
            }
          }).then(res => {
            this.getData();
          });
        },
        onCancel: () => {
          this.$Message.info("取消操作");
        }
      });
     },
    onSearch(){
     this.axios({
       url   : `${this.myUrl}order/list`,
       method: 'post',
       data  : {
        name: this.searchBox,
        page: this.page,
        rows: this.rows
       }
     }).then(res => {
      this.total = res.data.total;
      this.data  = res.data.rows;
    });
   },
   getTree(){
   	this.axios({
   		url :this.myUrl+'cate/list/3',
   		method:'post'
   	}).then(res=>{
   		this.data1=res.data;
   	})
   },
   treeclick(node){
   	if(node[0]){
   		 this.treetitle=node[0].title;//自己
		    var arr=[];
		    function getText(obj){
			    arr.push(obj.title);
			    if(obj.children){
		        for(let i=0;i<obj.children.length;i++){
			        getText(obj.children[i]);
			      }
			    }
		    }
		    getText(node[0]);
		    console.log(arr);
		    this.axios({
	        url:'http://localhost:3000/order/list',
	       	method:'post',
	        data:{
	            product_class:arr.toString()
	        }
        }).then(res=>{
        	this.data=res.data.rows;
        })
   		}
   }
  },
  
  mounted() {
    this.getData();
    this.getTree();
    
  }
};
</script>

<style type="text/css">
	.ivu-table td{height: 53px!important;}
	.ivu-tree-title{width: 100%;}
</style>